<template>
    <view class="app">
        <view class="app-container">
            <view class="card">
                <view class="text-default text-bold text-xl margin-tb-xl text-center">邀请好友下单各得优惠券</view>
                <div class="text-default grid col-3 text-center margin-bottom-xl">
                    <div :class="{ 'solids-right': items.length > index + 1 }" v-for="(item, index) in items"
                         :key="index">
                        <div class="margin-tb-xs">{{ result[item.key] }}</div>
                        <div class="margin-tb-xs">{{ item.name }}</div>
                    </div>
                </div>
                <button open-type="share" class="cu-btn block box-shadow bg-primary margin-tb-sm lg">分享</button>
                <button class="cu-btn block box-shadow bg-primary margin-tb-sm lg" @tap="shareFc">
                    生成海报图
                </button>
                <view class="text-gray text-center text-xs">
                    <text class="cuIcon-question"></text>
                    活动规则
                </view>
            </view>
            <div class="cu-modal" :class="{ show: qrShow }">
                <div class="cu-dialog bg-white">
                    <div class="cu-bar justify-end top">
                        <div class="action" @click="qrShow = false">
                            <text class="cuIcon-close "></text>
                        </div>
                    </div>
                    <image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
                    <div class="cu-bar bg-white">
                        <div class="action margin-0 flex-sub solid-left" @click="saveImageToPhoto">保存至相册</div>
                    </div>
                </div>
            </div>
        </view>
        <view class="hideCanvasView">
            <canvas class="hideCanvas" canvas-id="default_PosterCanvasId"
                    :style="{ width: (poster.width || 0) + 'px', height: (poster.height || 0) + 'px' }"></canvas>
        </view>
    </view>
</template>

<script>
    import app from '@/common/tools/QS-SharePoster/app.js';
    import {getSharePoster} from '@/common/tools/QS-SharePoster/QS-SharePoster.js';
    import {mapGetters} from 'vuex'

    export default {
        name: 'invite',
        onShareAppMessage() {
            return {
                title: '云打印 - 云端上传文件/图片即传即拿',
                desc: '锐腾网络科技',
                path: '/pages/tabbar/index?spid=123' // 路径，传递参数到指定页面。
            };
        },
        computed: {
            ...mapGetters([
                'userInfo'
            ])
        },
        data() {
            return {
                //动态宽高
                poster: {},
                qrShow: false,
                canvasId: 'default_PosterCanvasId',
                items: [
                    {
                        name: '邀请人数',
                        key: 'invitation_num'
                    },
                    {
                        name: '待使用人数',
                        key: 'invitation_remain_num'
                    },
                    {
                        name: '累计奖励',
                        key: 'invitation_money'
                    }
                ],
                result: {
                    invitation_num: 5,
                    invitation_remain_num: 1,
                    invitation_money: 200
                }
            };
        },
        methods: {
            //分享
            async shareFc() {
                try {
                    const d = await getSharePoster({
                        _this: this,
                        type: 'testShareType',
                        formData: {},
                        posterCanvasId: this.canvasId,	//canvasId
                        delayTimeScale: 20, //延时系数
                        drawArray: ({bgObj, type, bgScale}) => {
                            const dx = bgObj.width * 0.4;
                            const fontSize = bgObj.width * 0.045;
                            const lineHeight = bgObj.height * 0.04;
                            return new Promise((rs, rj) => {
                                rs([{
                                    type: 'custom',
                                    setDraw(Context) {
                                        Context.setFillStyle('black');
                                        Context.setGlobalAlpha(0.3);
                                        Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
                                        Context.setGlobalAlpha(1);
                                    }
                                },
                                {
                                    type: 'text',
                                    text: '长按识别二维码，即可获得无门槛优惠券',
                                    size: 20,
                                    color: 'white',
                                    alpha: 1,
                                    textAlign: 'left',
                                    textBaseline: 'middle',
                                    infoCallBack(textLength) {
                                        app.log('index页面的text的infocallback ，textlength:' + textLength);
                                        return {
                                            dx: bgObj.width - textLength - fontSize,
                                            dy: bgObj.height - lineHeight * 3
                                        }
                                    },
                                    serialNum: 0,
                                    id: 'tag1'	//自定义标识
                                },
                                {
                                    type: 'text',
                                    text: `${this.userInfo.nick_name}向您分享【云打印】`,
                                    size: 20,
                                    color: 'white',
                                    alpha: 1,
                                    textAlign: 'left',
                                    textBaseline: 'middle',
                                    serialNum: 1,
                                    allInfoCallback({drawArray} = {}) {
                                        const obj = drawArray.find(item => item.id === 'tag1');
                                        //也可以return promise对象
                                        return new Promise((rs, rj) => {
                                            setTimeout(() => {
                                                rs({
                                                    dx: obj.dx,
                                                    dy: obj.dy + lineHeight
                                                });
                                            }, 1);
                                        });
                                    }
                                },
                                {
                                    type: 'text',
                                    text: '云端上传文件/图片即传即拿',
                                    size: 20,
                                    color: 'white',
                                    alpha: 1,
                                    textAlign: 'left',
                                    textBaseline: 'middle',
                                    allInfoCallback({drawArray} = {}) {
                                        const obj = drawArray.find(item => item.id === 'tag1');
                                        //也可以return promise对象
                                        return new Promise((rs, rj) => {
                                            setTimeout(() => {
                                                rs({
                                                    dx: obj.dx,
                                                    dy: bgObj.height - lineHeight
                                                });
                                            }, 1);
                                        });
                                    },
                                },
                                {
                                    type: 'qrcode',
                                    image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559644434957&di=0db394a4ae41b6cff704fa3d4cbd997b&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F30%2F20180630233629_GueV4.thumb.700_0.jpeg',
                                    size: bgObj.width * 0.2,
                                    dx: bgObj.width * 0.05,
                                    dy: bgObj.height - bgObj.width * 0.23
                                }])
                            })
                        },
                        setCanvasWH: ({bgObj, type, bgScale}) => { // 为动态设置画布宽高的方法，
                            this.poster = bgObj;
                        }
                    });
                    console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath);
                    this.poster.finalPath = d.poster.tempFilePath;
                    this.qrShow = true;
                } catch (e) {
                    app.hideLoading();
                    app.showToast(JSON.stringify(e));
                    console.log(JSON.stringify(e));
                }
            },
            saveImageToPhoto() {
                uni.saveImageToPhotosAlbum({
                    filePath: this.poster.finalPath,
                    success(res) {
                        uni.showToast({
                            icon: 'success',
                            title: '保存成功',
                        })
                    }
                })
            }
        }
    };
</script>

<style scoped lang="scss">
    .app {
        background-size: cover;
        background-image: url();

        .app-container {
            .card {
                margin-top: 75%;
            }
        }
        .hideCanvasView {
            .hideCanvas {
                visibility: hidden;
                position: fixed;
                top: -99999upx;
                left: -99999upx;
                z-index: -1;
            }
        }
    }
</style>
